<template>
<div class="contain">
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">选择商品</h2>
    <button class="btn" @click="selectGoods">确定</button>
  </header>
  <div class="page">
    <div class="displayflex top-bar-w">
      <div class="top-bar-c flex1">
        <i class="iconfont icon-sech"></i>
        <div class="ipt"><input type="text" placeholder="输入商品名称" v-model="searchWhere" ></div>
      </div>
      <div class="btn-sech" @click="search()">搜索</div>
    </div>
    <div>
      <div class="goods-box displayflex" v-for="item in todolist">
        <div class="pic"><img src="~images/goods/good.jpg"></div>
        <div class="flex1 txt">
          <p class="tit ft17">{{item.GoodsName}}</p>
          <p>{{item.GoodsCode}}   {{item.GoodsType}}  {{item.GoodsSpec}}</p>
          <p>{{item.Producer}}</p>
          <div class="displayflex price-box">
            <i class="iconfont icon-reduce" @click="reduceNumber(item.Guid)"></i>
            <div class="flex1"><input type="tel"  v-model="item.PurchaserPoQty | 0" @change="inputNumber(item.Guid)"></div>
            <i class="iconfont icon-add" @click="addNumber(item.Guid)"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div @click="selectGoods" class="btn-bottom"><div class="btn">确定</div></div>
</div>
</template>

<script>
export default {
  data() {
    return {
      todolist: [],
      query: {},
      searchWhere: "",
      retrungoodslist: []
    };
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    addGoods() {
      this.$router.push({
        path: "/user/addGoods"
      });
    },
    search() {
      var self = this;
      self.query = {};
      self.query.GoodsName = self.searchWhere;
      self.query.GoodsCode = self.searchWhere;
      self.query.HelpCode = self.searchWhere;
      self.getData();
    },
    getData() {
      var self = this;
      self.query.CorpGuid = "";
      this.Ajax.post("SearchGoods", self.query).then(function(resp) {
        if (resp.IsSuccess) {
          self.todolist = resp.Datas;
        }
      });
    },
    addNumber(Guid) {
      var self = this;
      var goods = self.todolist.find(x => x.Guid == Guid);
      goods.PurchaserPoQty++;
      if (!self.retrungoodslist.find(x => x.Guid == Guid)) {
        self.retrungoodslist.push(goods);
      }
      console.log(goods.PurchaserPoQty);
    },
    reduceNumber(Guid) {
      var self = this;
      var goods = self.todolist.find(x => x.Guid == Guid);
      if (goods.PurchaserPoQty == 1) {
        var goods = self.retrungoodslist.find(x => x.Guid == Guid);
        var index = self.retrungoodslist.indexOf(goods);
        self.retrungoodslist.splice(index);
      }
      if (goods.PurchaserPoQty == 0) {
        goods.PurchaserPoQty = 0;
      } else {
        goods.PurchaserPoQty--;
      }
    },
    inputNumber(Guid){
      var self = this;
      var goods = self.todolist.find(x => x.Guid == Guid);
      console.log(goods);
      alert(goods.PurchaserPoQty);
    },
    selectGoods() {
      var self = this;
      sessionStorage.goods =JSON.stringify(self.retrungoodslist) ;
       self.$router.push({
        path: "/onlineOrder"
      });
      //console.log(self.retrungoodslist.length);
    }
  }
};
</script>